<template>
  <el-card class="stucard">
    <div class="stu_name" name="stu_name" v-html="items.studentName"></div>
    <div class="stu_no" name="stu_no" v-html="items.studentId"></div>
    <div class="stu_college" name="stu_college" v-html="items.instituteName"></div>
    <div class="stu_class" name="stu_class" v-html="items.className"></div>
  </el-card>
</template>

<script>
export default{
  name: "student_card",
  data(){
    return{

    }
  },
  props:['items','index'],
  methods:{

  },
  mounted(){
    // let div1 = document.getElementsByName('stu_name');
    // let div2 = document.getElementsByName('stu_no');
    // let div3 = document.getElementsByName('stu_college');
    // let div4 = document.getElementsByName('stu_class');
    // div1[this.index].innerHTML=this.items.studentName;
    // div2[this.index].innerHTML=this.items.studentId;
    // div3[this.index].innerHTML=this.items.instituteName;
    // div4[this.index].innerHTML=this.items.className;
  }
}
</script>

<style>
  .stucard{
    margin: 8px;
    display: grid;
    grid-template-areas:
    'stu_name stu_no'
    'stu_college stu_class';
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0 5px 10px #c3c3c3;
  }
  .stu_no{
    grid-area: stu_no;
  }
  .stu_name{
    grid-area: .stu_name;
    font-size: 18px;
    font-weight: bold;
    text-shadow:0 5px 10px #e8e8e8;
  }
  .stu_college{
    grid-area: stu_college;
  }
  .stu_class{
    grid-area: stu_class;
  }
</style>
